﻿<UserControl x:Class="WPFLoaders.MultipleRings"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    
    <UserControl.Resources>
        
        <Style TargetType="Ellipse" x:Key="CutOutEllipse">
            <Setter Property="Width" Value="250"/>
            <Setter Property="Height" Value="250"/>
            <Setter Property="StrokeThickness" Value="10"/>
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Clip">
                <Setter.Value>
                    <PathGeometry>
                        <PathFigure IsClosed="True" IsFilled="True" StartPoint="125,125">
                            <PolyLineSegment Points="190,0 250,0 250,250 0,250 0,0 60,0"/>
                        </PathFigure>
                    </PathGeometry>
                </Setter.Value>
            </Setter>
        </Style>
        
    </UserControl.Resources>
    
    <Grid Width="250" Height="250" x:Name="Grid">
        
        <Ellipse Style="{StaticResource CutOutEllipse}" />
        <Viewbox Stretch="Fill" Width="225" Height="225">
            <Ellipse Style="{StaticResource CutOutEllipse}" StrokeThickness="11.1" />
        </Viewbox>
        <Viewbox Stretch="Fill" Width="200" Height="200">
            <Ellipse Style="{StaticResource CutOutEllipse}" StrokeThickness="13" />
        </Viewbox>
        <Viewbox Stretch="Fill" Width="175" Height="175">
            <Ellipse Style="{StaticResource CutOutEllipse}" StrokeThickness="15" />
        </Viewbox>
        <Viewbox Stretch="Fill" Width="150" Height="150">
            <Ellipse Style="{StaticResource CutOutEllipse}" StrokeThickness="17.5" />
        </Viewbox>
        <Viewbox Stretch="Fill" Width="125" Height="125">
            <Ellipse Style="{StaticResource CutOutEllipse}" StrokeThickness="20" />
        </Viewbox>

    </Grid>
</UserControl>
